<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

// 控制注销确认框的显示与隐藏
const showConfirmModal = ref(false);
const userStore = useUserStore()
const router = useRouter()

// 处理点击“是”的逻辑
const handleYes = () => {
  userStore.userName = ''
  userStore.userPassword = ''
  userStore.rememberPsd = false
  ElMessage.success('注销成功')
  router.push({ path: '/' })
};
</script>


<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="logo">指掌乾坤</div>
      <div class="connection-status">
        <span class="connected">已连接</span>
        <i class="fa-solid fa-check"></i>
      </div>
      <div class="nav-options">
        <button class="option">指纹识别</button>
        <button class="option">人脸识别</button>
        <button class="option">音频播放</button>
        <button class="option">系统设置</button>
        <button class="option" @click="showConfirmModal = true">注销账号</button>
      </div>
      <button class="connect-new-device">+ 连接新设备</button>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 自定义按键设置 -->
      <div class="custom-key-setting">
        <h2>自定义按键设置</h2>
        <table class="key-table">
          <thead>
            <tr>
              <th>按键</th>
              <th>功能</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>按键1</td>
              <td>打开文件</td>
              <td>
                <i class="fa-solid fa-pen-to-square edit-icon">编辑</i>
                <i class="fa-solid fa-trash-can delete-icon">删除</i>
              </td>
            </tr>
            <tr>
              <td>按键2</td>
              <td>切换窗口</td>
              <td>
                <i class="fa-solid fa-pen-to-square edit-icon">编辑</i>
                <i class="fa-solid fa-trash-can delete-icon">删除</i>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="button-container">
          <button class="add-key-button">+ 添加新按键</button>
          <button class="save-settings-button">保存设置</button>
        </div>
      </div>

      <!-- 智能家居控制 -->
      <div class="smart-home-control">
        <h2>智能家居控制</h2>
        <div class="device-card">
          <div class="device-icon">
            <i class="fa-solid fa-lightbulb"></i>
          </div>
          <div class="device-info">
            <div class="device-name">智能灯泡</div>
            <div class="device-status">已开启</div>
          </div>
          <button class="control-button green">
            <i class="fa-solid fa-power-off"></i> 关闭
          </button>
        </div>
        <div class="device-card">
          <div class="device-icon">
            <i class="fa-solid fa-window"></i>
          </div>
          <div class="device-info">
            <div class="device-name">智能窗帘</div>
            <div class="device-status">已关闭</div>
          </div>
          <button class="control-button red">
            <i class="fa-solid fa-power-off"></i> 打开
          </button>
        </div>
      </div>

      <!-- 操作记录 -->
      <div class="operation-record">
        <h2>操作记录</h2>
        <table class="record-table">
          <thead>
            <tr>
              <th>时间</th>
              <th>操作项目</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2025-04-07 10:00</td>
              <td>智能灯泡</td>
              <td><span class="green">开启</span></td>
            </tr>
            <tr>
              <td>2025-04-07 09:30</td>
              <td>智能窗帘</td>
              <td><span class="red">关闭</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 注销确认框 -->
    <div v-show="showConfirmModal" class="modal-overlay">
      <div class="modal">
        <p>确认要注销吗？</p>
        <div class="button-group">
          <button @click="handleYes">是</button>
          <button @click="showConfirmModal = false">否</button>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* 顶部导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.logo {
  font-style: italic;
  font-size: 16px;
  color: #007bff;
}

.connection-status {
  display: flex;
  align-items: center;
  margin-right: auto;
  /* 使已连接部分往左靠 */
}

.connected {
  font-style: italic;
  margin-left: 20px;
  color: #28a745;
}

.nav-options {
  display: flex;
}

.option {
  margin-right: 20px;
  color: #6c757d;
  background-color: transparent;
  border: 1px solid #ced4da;
  /* 添加边框 */
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.option:hover {
  background-color: #e9ecef;
}

.connect-new-device {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
}

/* 主要内容区域样式 */
.main-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.custom-key-setting,
.smart-home-control,
.operation-record {
  width: 100%;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .custom-key-setting {
    width: 65%;
  }

  .smart-home-control {
    width: 30%;
  }

  .operation-record {
    width: 65%;
  }
}

h2 {
  margin-bottom: 15px;
  font-size: 20px;
}

.key-table,
.record-table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: collapse;
}

.key-table th,
.key-table td,
.record-table th,
.record-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.edit-icon {
  color: #007bff;
  margin-right: 5px;
}

.delete-icon {
  color: #dc3545;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.add-key-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
}

.save-settings-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
}

.device-card {
  margin-bottom: 15px;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.device-icon {
  font-size: 24px;
  color: #ffc107;
  margin-bottom: 5px;
}

.device-info {
  margin-bottom: 5px;
}

.device-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.device-status {
  font-size: 14px;
  color: #6c757d;
}

.control-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
}

.control-button.red {
  background-color: #dc3545;
}

.record-action span {
  font-size: 14px;
}

.record-action span.green {
  color: #28a745;
}

.record-action span.red {
  color: #dc3545;
}

/* 注销确认框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.button-group {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.button-group button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-group button:first-child {
  background-color: #e74c3c;
  color: white;
}

.button-group button:last-child {
  background-color: #3498db;
  color: white;
}
</style>
